<template>
  <div id="login" class="row">
    <div class="col-12 px-0">
      <div class="card" v-if="validating === 0">
        <div class="card-header">企业微信二次验证</div>
        <div class="card-body">
          <form id="frmLogin" role="form" class="form-horizontal">
            <div class="row">
              <label class="control-label col-1">
                <span class="glyphicon glyphicon-user"></span>
              </label>

              <div class="col-10">
                <input
                  type="text"
                  class="form-control"
                  name="username"
                  placeholder="差旅系统 用户名"
                  v-model.trim="username"
                />
              </div>
            </div>
            <div class="row">
              <label class="control-label col-1">
                <span class="glyphicon glyphicon-lock"></span>
              </label>

              <div class="col-10">
                <input
                  type="password"
                  class="form-control"
                  name="password"
                  placeholder="差旅系统 密码"
                  v-model.trim="password"
                />
              </div>
            </div>

            <div class="row">
              <label class="control-label col-1"> </label>
              <div class="col-5">
                <input
                  type="text"
                  name="captchaValue"
                  class="form-control"
                  placeholder="验证码"
                  v-model.trim="vcode"
                />
              </div>
              <div class="col-5">
                <img
                  id="kaptchaImage"
                  height="32"
                  width="120"
                  title="单击换图片"
                />
              </div>
            </div>

            <div class="row">
              <div class="col-10 ms-auto me-auto">
                <button
                  type="button"
                  class="btn btn-primary "
                  @click.stop="validateWwUser()"
                >
                  验证并绑定
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="card" v-else-if="validating === 1">
        <div class="card-body">
          <h5 class="card-title">
            <span class="text-success">验证成功!</span>
            企业微信账户与差旅系统账户绑定成功！
          </h5>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import { validateWwUser } from "@/api/user.js";
import { getURLParameter } from "@/common/common.js";

export default {
  data() {
    return {
      username: "",
      password: "",
      vcode: "",
      eid: "",
      wwCode: "",
      validating: 0,

      errMsg: "",
      errAlert: false,
      justLogout: false,
    };
  },
  mounted: function () {
    this.$store.commit("setPrintMode", 1);

    this.eid = getURLParameter("eid");
    this.wwCode = getURLParameter("code");
  },
  updated: function () {
    if (this.logined === false && this.justLogout) {
      this.justLogout = false;
      this.refreshKaptcha();

      var self = this;
      $("#kaptchaImage").click(self.refreshKaptcha);
    }
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    validateWwUser: function () {
      const params = {
        username: this.username,
        password: this.password,
        captchaValue: this.vcode,
        eid: this.eid,
        wwCode: this.wwCode,
      };

      validateWwUser(params, (jsonResult) => {
        if (jsonResult.status === "OK") {
          this.validating = 1;
        } else {
          this.showErrMsg(jsonResult.errMsg);
          this.refreshKaptcha();
          this.vcode = "";
        }
      });
    },
    refreshKaptcha: function () {
      $("#kaptchaImage")
        .attr("src", "/Flight/captcha.do?" + Math.floor(Math.random() * 100))
        .fadeIn();
    },
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      // console.log('i m in.');
      $("#kaptchaImage").click(() => {
        vm.refreshKaptcha();
      });
      $("#kaptchaImage").click();
    });
  },
};
</script>
